<template>
  <div class="topCard">
    <el-card>
      <el-form :inline="true" class="form">
        <el-form-item :label="props.queryName">
          <el-input v-model="input" :placeholder="`请输入${props.queryName}`" />
        </el-form-item>
        <div class="topRight">
          <el-form-item>
            <el-button type="primary" @click="Search">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  queryName: {
    type: String,
    default: '',
  },
})
let input = ref('')
const emit = defineEmits(['SearchInput', 'reset'])
const Search = () => {
  emit('SearchInput', input.value)
}
const reset = () => {
  emit('reset')
}
</script>

<style lang="scss" scoped>
.topCard {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding: 26px;
  }
  .form {
    display: flex;
    justify-content: space-between;
  }
}

.el-form-item {
  margin-bottom: 0;
}
</style>
